<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/animate.min.css" />
		<link rel="stylesheet" href="css/swiper-3.3.1.min.css" />
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		
		<div class="swiper-container">
		
		    <div class="swiper-wrapper">
		        <div class="swiper-slide" style="background: url(img/b1.jpg) no-repeat; background-size: 100% 100%;">
		        	<div class="con">
		        		<img src="img/b1-1.png" />
		        		<ul class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.8s" swiper-animate-delay="0.2s">
		        			<li>——2016年5月</li>
		        			<li>北京大学计算机系</li>
		        		</ul>
		        		
		        	</div>
		        </div>
		        <div class="swiper-slide">
		        	<div class="con1">
		        		<div class="top">
		        			<div class="l left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.8s" swiper-animate-delay="0.2s">
		        				<div class="l-top"><img src="img/b2-1.jpg"/></div>
		        				<div class="l-bottom">
		        					<img class="l" src="img/b2-2.jpg" />
		        					<div class="l l-b-right"><p>来学校时</p><p>还不太懂你</p><p>离开时</p><p>才觉得刻骨铭心</p></div>
		        				</div>
		        			</div>
		        			<div class="l right ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.8s" swiper-animate-delay="0.2s"><img src="img/b2.png"/></div>
		        		</div>
		        		<div class="bottom ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.5s">
		        			<img src="img/b2-3.jpg" />
		        			<div class="bott"  >
		        				毕业快乐
		        			</div>
		        			
		        			
		        		</div>
		        	</div>
		        </div>
		        <div class="swiper-slide">
		        	<div class="con2 ">
		        		<div class="img1 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.5s"><img src="img/b3-1.jpg"/></div>
		        		<div class="img2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="2.3s"><img src="img/b3-2.jpg"/></div>
		        		<div class="img3 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="1.3s"><img src="img/b3-3.jpg"/></div>
		        	</div>
		        </div>
		        <div class="swiper-slide">
		        	<div class="con3">
		        		<div class="sun ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="1s">
		        			<img src="img/2.gif"/>
		        		</div>
		        		<div class="img1 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s"><img src="img/b4.jpg" /></div>
		        		<div class="img2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="1s"><img src="img/b4.jpg" /></div>
		        		<div class="img3 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="2s"><img src="img/b4.jpg" /></div>
		        		<div class="img4 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="3s"><img src="img/b4.jpg" /></div>
		        		<div class="byj ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="3s">
		        			<img src="img/b2.png"/>
		        		</div>
		        	</div>
		        	
		        </div>
		        <div class="swiper-slide">
		        	<div class="con4">
		        		<b class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="4s" swiper-animate-delay="0s">时光不老 我们不散</b>
		        		<div class="xin">
		        			<div class="one ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="0s">
		        				<img class="xin1" src="img/b2-1.jpg"/>
		        				<img class="xin1" src="img/b2-2.jpg"/>
		        				<img class="xin1" src="img/b2-3.jpg"/>
		        				<img class="xin1" src="img/b4.jpg"/>
		        			</div>
		        			<div class="two ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="1s">
		        				<img class="xin2" src="img/b3-1.jpg"/>
		        				<img class="xin2" src="img/x3.jpg"/>
		        				<img class="xin2" src="img/x2.jpg"/>
		        				<img class="xin2" src="img/b2-2.jpg"/>
		        				<img class="xin2" src="img/x1.jpg"/>
		        			</div>
		        			<div class="three ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="2s">
		        				<img src="img/b4.jpg"/>
		        				<img src="img/x3.jpg"/>
		        				<img src="img/b3-2.jpg"/>
		        				<img src="img/x2.jpg"/>
		        			</div>
		        			<div class="four ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="3s">
		        				<img src="img/b2-1.jpg"/>
		        				<img src="img/b2-3.jpg"/>
		        				<img src="img/b3-1.jpg"/>
		        			</div>
		        			<div class="five ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="4s">
		        				<img src="img/x1.jpg"/>
		        			</div>
		        		</div>
		        	</div>
		        </div>
		        
		        <div class="swiper-slide">
		        	<div class="up ani"swiper-animate-effect="fadeInLeft" swiper-animate-duration="2.5s" swiper-animate-delay="0s">
		        		<img src="img/222.png"/>
		        		<img src="img/111.png"/>
		        	</div>
		        	<div class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2.5s" swiper-animate-delay="1s" style="display: block;height: 4%;">
		        		<div class="pp">
		        			<span>时光匆匆，抓不住，留不住</span>
		        		</div>
		        		<div class="pp">
		        			<span>曾经的不满，抱怨，如今都化为眷恋</span>
		        		</div>
		        		<div class="pp">
		        			<span>四年，我们用同样的钥匙开同一扇门</span>
		        		</div>
		        		<div class="pp">
		        			<span>四年，我们用同样的眼神，仰望同一个焦点</span>
		        		</div>
		        		<div class="pp">
		        			<span>四年，我们同呼吸，共成长</span>
		        		</div>
		        		<div class="pp">
		        			<span>那些开心的，悲伤的，嬉笑的，彷徨的是我们的青春</span>
		        		</div>
		        		<div class="pp">
		        			<span>如今，挥手告别过去</span>
		        		</div>
		        		<div class="pp">
		        			<span>挥不去你青涩的面孔</span>
		        		</div>
		        		<div class="pp">
		        			<span>还有四年的形影不离</span>
		        		</div>
		        		<div class="pp">
		        			<span>你的身影跳跃在我脑海</span>
		        		</div>
		        		<div class="pp">
		        			<span>你的微笑停留在我眼角</span>
		        		</div>
		        		<div class="pp">
		        			<span>青春的日子里，有你陪我一起疯狂</span>
		        		</div>
		        		<div class="pp">
		        			<span>记忆凝成画卷 美得不敢触摸</span>
		        		</div>
		        	</div>
		        </div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		</div>
		
		
		
		<script type="text/javascript" src="js/swiper-3.3.1.min.js" ></script>
		<script type="text/javascript" src="js/swiper.animate1.0.2.min.js" ></script>
		<script>
			var mySwiper = new Swiper ('.swiper-container', {
			    direction: 'vertical',
			    loop: true,
			    
			    // 如果需要分页器
			    pagination: '.swiper-pagination',
			    onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
				    swiperAnimateCache(swiper); //隐藏动画元素 
				    swiperAnimate(swiper); //初始化完成开始动画
				  }, 
				  onSlideChangeEnd: function(swiper){ 
				    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				  } 
			  })        
		</script>
	</body>
</html>
